<template>
  <view class="page-order">
    <topbar :tabs="tabs" :active="active" @change="changeTab"></topbar>
    <view
      class="w-100 h296 f-b-c circle34 show0 mb-3 bg-f8ff re"
      v-for="(item, index) in order_list"
      :key="item.id"
    >
      <ImageFile
        :url="item.thumbnail"
        mode="aspectFill"
        className="w226 h296 ty-circle-img"
      />
      <view class="w470 bg-white h296 pl-4 pr-2 py-2 ty-circle-box re">
        <view class="font32 t-20 f-b-c re">
          <view class="font700 w314">{{ item.goodsName }}</view>
          <view></view>
          <view
            class="font24 f-e-c w120 font400 ab top0 right0"
            :class="{
              'text-red': item.orderStatus == 'UNPAID' && !item.destroy,
              't-theme_1': item.orderStatus == 'PAID' && !item.destroy,
            }"
            >{{
              item.destroy ? "已核销" : set_pay_status(item.orderStatus)
            }}</view
          >
        </view>
        <view class="font21 t-8 py-1">{{ item.createTime }}</view>
        <view class="font32 t-20 font700 py-1 f-y-e h52">
          <text class="font24 mr-05">¥</text>
          <text>{{ item.payFee }}</text>
        </view>
        <view class="font24 t-8 f-b-c h24">共{{ item.totalNum }}张</view>
        <view class="ab bottom20 right20 left0 h64 f-e-c font28 t-0">
          <view
            class="bg-theme circle20 h64 w164 f-c-c"
            @click="get_pay(item)"
            v-if="item.orderStatus === 'UNPAID'"
            >立即支付</view
          >

          <view
            class="bg-theme circle20 h64 w164 f-c-c"
            style="color: #fff"
            @click="get_refund(item)"
            v-if="item.orderStatus === 'PAID' && !item.destroy && item.payFee"
            >退款</view
          >

          <view
            class="bg-theme circle20 h64 w164 f-c-c ml-2"
            style="color: #fff"
            @click="details(item)"
            >查看详情</view
          >
        </view>
      </view>
      <view class="ab left206 top0 bottom0">
        <view
          class="w16 h16 show0-in ab left12 top40 bg-f8ff rounded-circle"
        ></view>
        <view
          class="w16 h16 show0-in ab left12 top72 bg-f8ff rounded-circle"
        ></view>
        <view
          class="w16 h16 show0-in ab left12 top104 bg-f8ff rounded-circle"
        ></view>
        <view
          class="w16 h16 show0-in ab left12 top136 bg-f8ff rounded-circle"
        ></view>
        <view
          class="w16 h16 show0-in ab left12 top172 bg-f8ff rounded-circle"
        ></view>
        <view
          class="w16 h16 show0-in ab left12 top204 bg-f8ff rounded-circle"
        ></view>
        <view
          class="w16 h16 show0-in ab left12 top206 bg-f8ff rounded-circle"
        ></view>
        <view
          class="w16 h16 show0-in ab left12 top238 bg-f8ff rounded-circle"
        ></view>
        <view
          class="ab left0 w40 h40 bg-f8ff show-in-bottom"
          style="top: -20rpx"
        ></view>
        <view
          class="ab left0 w40 h40 bg-f8ff show-in-top"
          style="bottom: -20rpx"
        ></view>
      </view>
    </view>
    <view
      class="w-100 t-a font24 t-4 pb-1"
      v-if="is_loading && order_list.length > 0"
      >没有更多了</view
    >
    <view class="w-100 t-a font24 t-3 pt-12 pb-1 no-data" v-else>暂无数据</view>
  </view>
</template>

<script>
import ImageFile from "@/components/img_file.vue";
import wxPay from "@/common/weixinPay.js";
import { my_order_list } from "@/api/order.js";
export default {
  mixins: [wxPay],
  components: {
    ImageFile,
  },
  data() {
    return {
      active: "all",
      order_list: [],
      is_loading: false,
      query: {
        currentPage: 1,
        orderType: "TICKET", // 订单类型 TICKET：票务/ACTIVITY：活动/YEAR_CARD：年卡/MALL：商城/FOOD：餐饮/MAP：地图/LINE：路线,
        pageSize: 999,
        orderTypeListStr: "",
        orderStatus: "",
      },
      tabs: [
        { title: "全部", key: "all" },
        { title: "待支付", key: "UNPAID" },
        { title: "已支付", key: "PAID" },
        { title: "已完成", key: "FINISHED" },
        { title: "已退款", key: "REFUND" },
        { title: "已关闭", key: "CLOSED" },
      ],
    };
  },
  created() {
    this.get_order_list();
  },
  methods: {
    changeTab(e) {
      console.log(e);
      this.active = e;
      this.query.orderStatus = e === "all" ? "" : e;
      this.get_order_list();
    },
    // 我的订单
    async get_order_list() {
      const orgId = uni.getStorageSync("orgId");
      if (!orgId) {
        uni.showToast({
          title: "请登录",
          icon: "none",
        });
        setTimeout(() => {
          uni.reLaunch({
            url: "/pages/login/index",
          });
        }, 1000);
        return;
      }
      const { code, body } = await my_order_list(this.query);
      if (code === "0") {
        body?.records?.map((item) => {
          item.goodsInfo = JSON.parse(item.goodsJson);
          item.goodsName = item.goodsInfo?.itemList[0]?.goodsName;
          item.totalNum = item.goodsInfo?.totalNum;
          item.thumbnail = item.goodsInfo?.itemList[0]?.thumbnail;
        });

        this.order_list = !this.query.orderStatus
          ? body.records
          : [...body.records].filter(
              (v) => v.orderStatus === this.query.orderStatus
            );

        const { records, current, pages } = body;
        // 当前页大于总页 显示没有更多了
        if (current >= pages) {
          this.is_loading = true;
        } else {
          this.is_loading = false;
        }
      }
    },
    details(val) {
      // 跳转到详情
      uni.setStorageSync("order_details", val);
      uni.navigateTo({
        url: `/pages/my/order/details?id=${val.id}`,
      });
    },
    get_refund(val) {
      uni.setStorageSync("order_refund", val);
      uni.navigateTo({
        url: `/pages/my/order/refund?id=${val.id}`,
      });
    },
    get_pay(val) {
      let data = {
        orderIdList: [val.id], // 订单id集合
        payFee: val.goodsFee, // 支付金额
        id: val.id, //outTradeNo
      };
      this.get_wx_order(data);
    },
  },
};
</script>

<style lang="scss" scoped>
.page-order {
  min-height: 100%;
  background-color: #f7fdff;
  padding: 26rpx;
  padding-top: 110rpx;
}
.ty-line-info {
  border-radius: 0 28rpx 28rpx 28rpx;
  margin-top: -32rpx;
}
.ty-circle-box {
  border-radius: 0 34rpx 34rpx 0;
}
.show-in-top {
  // box-shadow: 1rpx 0px 1rpx rgba(0,102,29,0.15) inset;
  transform: rotate(90deg);
  border-radius: 50% 0 0 50%;
}
.show-in-bottom {
  // box-shadow: 1rpx 0px 1rpx rgba(0,102,29,0.15) inset;
  transform: rotate(-90deg);
  border-radius: 50% 0 0 50%;
}
.no-data {
  height: 100%;
}
</style>
